<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #333;
      }
    </style>
  </head>
  <body>
    <div id="i-container">
      <canvas id="i-frostpad-canvas"></canvas>
    </div>

    <script>
      (function () {

        var cvs = document.getElementById('i-frostpad-canvas');
        var ctx = cvs.getContext('2d');

        // init
        var width = window.innerWidth;
        var height = window.innerHeight;
        cvs.width = width;
        cvs.height = height;

        var gridX = width / 8.0;
        var gridY = height / 3.0;

        function drawGrid() {
          for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 3; j++) {
              ctx.save();
              ctx.translate(gridX * i, gridY * j);
              ctx.rect(-gridX * 0.49, -gridY * 0.49, gridX * 0.5, gridY * 0.5);
              ctx.restore();
            }
          }
        }

        //ctx.clip();

        var grad = ctx.createLinearGradient(0, 0, width, height);
        grad.addColorStop(0, 'red');
        grad.addColorStop(1 / 6, 'orange');
        grad.addColorStop(2 / 6, 'yellow');
        grad.addColorStop(3 / 6, 'green')
        grad.addColorStop(4 / 6, 'aqua');
        grad.addColorStop(5 / 6, 'blue');
        grad.addColorStop(1, 'purple');
        // ctx.fillStyle = grad;
        // ctx.fillRect(0, 0, width, height);



        // render phase 1
        function renderPhase1() {
          for (var i = 0; i < 8; i++) {
            var hue = 200 + 55 / 8 * (i % 4);
            var lum = 40 + 40 / 8 * i;
            ctx.fillStyle = grad;
            ctx.fillRect(gridX * i, 0, gridX-1, gridY-1);
            ctx.fillRect(gridX * i, gridY, gridX-1, gridY-1);
            ctx.fillRect(gridX * i, gridY * 2.0, gridX-1, gridY-1);
          }
        }

        // render phase 2
        function renderPhase2() {
          ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
          ctx.fillRect(0, 0, width, height);
          ctx.strokeStyle = '#0f0'
          ctx.strokeRect(4, 4, width-8, height-8);
        }


        // responder
        var bbox = cvs.getBoundingClientRect();
        function _getPosition(event) {
          return {
            x: event.clientX - bbox.left,
            y: event.clientY - bbox.top
          }
        }

        function _start(event) {
          event.preventDefault();
          var p = _getPosition(event);
          currentPhase = 2;
          cvs.addEventListener('mousemove', _move, false);
          cvs.addEventListener('mouseup', _end, false);
        }

        function _move() {

        }

        function _end() {
          currentPhase = 1;
        }

        cvs.addEventListener('mousedown', _start, false);

        renderPhase1();

        // var currentPhase = 1;
        // function draw() {
        //   ctx.clearRect(0, 0, width, height);
        //   renderPhase1();
        //   if (currentPhase === 2) {
        //     renderPhase2();
        //   }
        //   requestAnimationFrame(draw);
        // }
        // draw();

      })();
    </script>
  </body>
</html>